<template>
  <div style="margin-top: 50px">
    <vs-input
      v-validate="'required|min:3'"
      data-vv-validate-on="blur"
      name="account"
      icon-no-border
      icon="icon icon-user"
      icon-pack="feather"
      v-model="account"
      class="w-full"
    />
    <span class="text-danger text-sm">{{ errors.first("account") }}</span>

   
    <div class="code">
      <div class="code-input">
        <vs-input
          data-vv-validate-on="blur"
          v-validate="'required|min:6|max:6'"
          name="code"
          icon-no-border
          icon="icon icon-lock"
          icon-pack="feather"
          v-model="code"
          class="w-full mt-6"
        />
        <!-- <span class="text-danger text-sm">{{ errors.first("code") }}</span> -->
      </div>
      <div class="get-code">
        <vs-button
          border
          :style="{ width: '130px' }"
          :active="true"
          @click="getLoginCode"
        >
          {{ codeTitle }}
        </vs-button>
      </div>
    </div>

    <div class="flex flex-wrap justify-between my-5">
      <vs-checkbox v-model="checked" class="mb-3" @change="remember"
        >记住我</vs-checkbox
      >
      <!--  <router-link to="/pages/forgot-password">Forgot Password?</router-link>  -->
    </div>
    <div class="flex flex-wrap justify-between mb-3">
      <vs-button :disabled="!validateForm" @click="loginJWT">登录</vs-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      account: "",
      password: "",
      // 短信验证码
      code: "",
      //checked: false,
      checked: true,
      adminInfo: [],
      codeTitle: "获取验证码",
      timer: null,
    };
  },
  computed: {
    validateForm() {
      return !this.errors.any() && this.account !== "";
    },
  },
  methods: {
    getLoginCode() {
      if (!this.account || this.timer) return;
      this.$axios({
        url: "/admin/Login/getCode",
        method: "post",
        data: {
          account: this.account,
        },
      }).then((res) => {
        this.$vs.loading.close();
        if (res.data.status == 1) {
          this.$vs.notify({
            title: "提示",
            text: res.data.msg,
            iconPack: "feather",
            icon: "icon-alert-circle",
            color: "success",
          });
          let time = 60;
          this.timer = setInterval(() => {
            time -= 1;
            if (!time) {
              clearInterval(this.timer);
              this.codeTitle = `获取验证码`;
            } else {
              this.codeTitle = `${time}S`;
            }
          }, 1000);
        } else {
          this.$vs.notify({
            title: "提示",
            text: res.data.msg,
            iconPack: "feather",
            icon: "icon-alert-circle",
            color: "danger",
          });
        }
      });
    },
    checkLogin() {
      // If user is already logged in notify
      if (this.$store.state.auth.isUserLoggedIn()) {
        // Close animation if passed as payload
        // this.$vs.loading.close()

        this.$vs.notify({
          title: "Login Attempt",
          text: "You are already logged in!",
          iconPack: "feather",
          icon: "icon-alert-circle",
          color: "warning",
        });

        return false;
      }
      return true;
    },
    loginJWT() {
      let _this = this;
      if (!_this.code) {
        _this.$vs.notify({
          title: "提示",
          text: "验证码不能为空",
          iconPack: "feather",
          icon: "icon-alert-circle",
          color: "danger",
        });
        return;
      }
      if (!_this.checkLogin()) return;
      // Loading
      _this.$vs.loading();
      const payload = {
        checked: _this.checked,
        userDetails: {
          account: _this.account,
          password: _this.password,
          code: this.code,
        },
      };
      if (payload.checked) {
        _this.remember();
      }
      console.log("payload", payload);
      _this
        .$axios({
          url: "/admin/Login/login",
          method: "post",
          data: payload.userDetails,
        })
        .then((res) => {
          _this.$vs.loading.close();
          if (res.data.status == 1) {
            _this.$vs.notify({
              title: "提示",
              text: res.data.msg,
              iconPack: "feather",
              icon: "icon-alert-circle",
              color: "success",
            });
            setTimeout(() => {
              _this.$router.push({ path: "/dashboard/ecommerce" });
            }, 500);
          } else {
            _this.$vs.notify({
              title: "提示",
              text: res.data.msg,
              iconPack: "feather",
              icon: "icon-alert-circle",
              color: "danger",
            });
          }
        });
    },
    // 记住密码
    remember() {
      let _this = this;
      console.log(_this.checked);
      if (_this.checked) {
        _this.adminInfo = {
          account: _this.account,
          password: _this.password,
        };
        console.log(_this.adminInfo);
        _this.setSessionStorage("rememberAmin", _this.adminInfo);
      } else {
        localStorage.removeItem("rememberAmin");
      }
    },
    setSessionStorage(name, val) {
      return localStorage.setItem(name, JSON.stringify(val));
    },
    registerUser() {
      if (!this.checkLogin()) return;
      this.$router.push("/pages/register").catch(() => {});
    },
  },
  mounted() {
    let _this = this;
    let rememberInfo = JSON.parse(localStorage.getItem("rememberAmin"));
    if (rememberInfo) {
      _this.checked = true;
      _this.account = rememberInfo.account;
      _this.password = rememberInfo.password;
    }
  },
};
</script>

<style scoped lang="scss">
.code {
  display: flex;
  align-items: center;
  &-input {
    flex: 1;
  }
  .get-code {
    margin-left: 10px;
    margin-top: 22px;
    // height: 58.59px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
  }
}
</style>
